<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @charset "utf-8";

      body {
        margin: 0;
        padding: 0;
      }
      .wrapper {
        width: 300px;
        margin: 100px auto;
      }
      .litteH {
        position: relative;
      }
      .bodyH {
        position: absolute;
        width: 240px;
        height: 400px;
        border: 5px solid #000;
        border-radius: 115px;
        background: rgb(249, 217, 70);
        overflow: hidden;
        z-index: 2;
      }
      .bodyH .condoleBelt {
        position: absolute;
      }
      .bodyH .condoleBelt .left,
      .bodyH .condoleBelt .right {
        width: 100px;
        height: 16px;
        border: 5px solid #000;
        background: rgb(32, 116, 160);
        position: absolute;
        top: -90px;
        left: -35px;
        z-index: 2;
        -webkit-transform: rotate(45deg);
      }
      .bodyH .condoleBelt .left {
        top: -88px;
        left: 165px;
        -webkit-transform: rotate(-45deg);
      }
      .bodyH .condoleBelt .left:after,
      .bodyH .condoleBelt .right:after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #000;
        position: absolute;
        top: 4px;
        left: 88px;
      }

      .bodyH .condoleBelt .left:after {
        left: 5px;
      }
      .bodyH .trousers {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        border-top: 6px solid #000;
        background: rgb(32, 116, 160);
      }
      .trousers_top {
        width: 160px;
        height: 60px;
        border: 6px solid #000;
        border-bottom: none;
        border-radius: 0 0 5px 5px;
        background: rgb(32, 116, 160);
        position: absolute;
        bottom: 100px;
        left: 34px;
      }
      .pocket {
        width: 60px;
        height: 45px;
        border: 6px solid #000;
        border-radius: 0px 0px 25px 25px;
        position: absolute;
        bottom: 65px;
        left: 84px;
      }
      .line_right {
        width: 30px;
        height: 30px;
        border-bottom-left-radius: 100px;
        border-bottom: 6px solid #000;
        border-left: 6px solid #000;
        position: absolute;
        left: 0;
        bottom: 60px;
        -webkit-transform: rotate(-75deg);
      }
      .line_left {
        width: 30px;
        height: 30px;
        border-bottom-right-radius: 100px;
        border-bottom: 6px solid #000;
        border-right: 6px solid #000;
        position: absolute;
        right: 0;
        bottom: 63px;
        -webkit-transform: rotate(75deg);
      }
      .line_bottom {
        height: 40px;
        border: 3px solid #000;
        border-radius: 3px;
        position: absolute;
        left: 118px;
        bottom: 0px;
      }
      .hair {
        position: relative;
      }
      .left_hair_one {
        width: 130px;
        height: 100px;
        border-radius: 50%;
        border-top: 8px solid #000;
        position: absolute;
        left: 17px;
        top: -17px;
        -webkit-transform: rotate(27deg);
        -webkit-animation: lefthair 2s ease-in-out infinite;
      }
      @-webkit-keyframes lefthair {
        0%,
        25%,
        31%,
        100% {
        }
        30% {
          -webkit-transform: rotate(31deg) translate3d(-3px, -1px, 0);
        }
      }
      .left_hair_two {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border-top: 6px solid #000;
        position: absolute;
        left: 45px;
        top: -10px;
        -webkit-transform: rotate(15deg);
      }
      .eyes {
        position: relative;
        z-index: 3;
      }
      .eyes .leftEye,
      .eyes .rightEye {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        border: 6px solid #000;
        background: #fff;
        position: absolute;
        top: 60px;
        left: 27px;
      }
      .eyes .leftEye {
        left: 124px;
      }
      .eyes .leftEye .left_blackEye,
      .eyes .rightEye .right_blackEye {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #000;
        position: absolute;
        top: 24px;
        left: 22px;
        -webkit-animation: blackeye 5s ease-in infinite;
      }
      @-webkit-keyframes blackeye {
        0%,
        20%,
        50%,
        70%,
        100% {
          -webkit-transform: translateX(0px);
        }
        30%,
        40% {
          -webkit-transform: translateX(15px);
        }
        80%,
        90% {
          -webkit-transform: translateX(-15px);
        }
      }
      .eyes .leftEye .left_blackEye .left_white,
      .eyes .rightEye .right_blackEye .right_white {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 7px;
        left: 17px;
        -webkit-animation: whiteeye 5s ease-in-out infinite;
      }
      @-webkit-keyframes whiteeye {
        0%,
        20%,
        50%,
        70%,
        100% {
          -webkit-transform: translateX(0px);
        }
        30%,
        40% {
          -webkit-transform: translate3d(3px, 4px, 0);
        }
        80%,
        90% {
          -webkit-transform: translate3d(-15px, 4px, 0);
        }
      }
      .eyes .leftEye .left_blackEye .left_white {
        top: 4px;
        left: 17px;
      }
      .eyes .leftEye:after,
      .eyes .rightEye:after {
        content: '';
        width: 28px;
        height: 18px;
        background: #000;
        position: absolute;
        left: -30px;
        top: 37px;
        -webkit-transform: skewX(20deg) rotate(7deg);
      }
      .eyes .leftEye:after {
        left: 89px;
        top: 37px;
        -webkit-transform: skewX(-20deg) rotate(-7deg);
      }
      .mouse {
        position: relative;
      }
      .mouse .mouse_shape {
        width: 55px;
        height: 35px;
        border: 5px solid #000;
        border-bottom-left-radius: 30px;
        background: #fff;
        position: absolute;
        top: 175px;
        left: 98px;
        z-index: 3;
        -webkit-transform: rotate(-35deg);
        -webkit-animation: mouse 5s ease-in-out infinite;
      }
      @-webkit-keyframes mouse {
        40%,
        43% {
          width: 45px;
          height: 25px;
          top: 180px;
        }
        0%,
        35%,
        48%,
        100% {
          width: 55px;
          height: 35px;
          top: 175px;
          -webkit-transform: rotate(-35deg);
        }
      }
      .mouse .mouse_shape:after {
        content: '';
        width: 70px;
        height: 32px;
        border-bottom: 5px solid #000;
        border-radius: 35px 26px 5px 5px;
        background: rgb(249, 217, 70);
        position: absolute;
        top: -16px;
        left: 3px;
        -webkit-transform: rotate(34deg);
        -webkit-animation: mouse_mask 5s ease-in-out infinite;
      }
      @-webkit-keyframes mouse_mask {
        40%,
        43% {
          width: 60.5px;
          top: -19.3px;
          left: 1.5px;
        }
        0%,
        35%,
        48%,
        100% {
          width: 70px;
          top: -16px;
          left: 3px;
          -webkit-transform: rotate(33deg);
        }
      }
      .hands {
        position: relative;
      }
      .hands .leftHand,
      .hands .rightHand {
        width: 80px;
        height: 80px;
        border: 6px solid #000;
        border-radius: 25px;
        background: rgb(249, 217, 70);
        position: absolute;
        top: 220px;
        left: -23px;
        -webkit-transform: rotate(40deg);
        -webkit-animation: rightHand 0.8s ease-in-out infinite;
      }
      @-webkit-keyframes rightHand {
        0%,
        50%,
        100% {
          -webkit-transform: rotate(40deg);
        }
        30% {
          -webkit-transform: rotate(37deg) translateX(1px);
        }
      }
      .hands .leftHand {
        left: 182px;
        top: 220px;
        -webkit-transform: rotate(-40deg);
        -webkit-animation: leftHand 0.8s ease-in-out infinite;
      }
      @-webkit-keyframes leftHand {
        0%,
        50%,
        100% {
          -webkit-transform: rotate(-40deg);
        }
        80% {
          -webkit-transform: rotate(-37deg) translateX(-1px);
        }
      }
      .hands .leftHand:after,
      .hands .rightHand:after {
        content: '';
        width: 6px;
        border: 3px solid #000;
        border-radius: 3px;
        position: absolute;
        left: 13px;
        top: 50px;
        -webkit-transform: rotate(90deg);
      }

      .hands .leftHand:after {
        left: 53px;
        top: 50px;
        -webkit-transform: rotate(-90deg);
      }
      .feet {
        position: relative;
      }
      .feet .left_foot,
      .feet .right_foot {
        width: 36px;
        height: 50px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 9px;
        background: #000;
        position: absolute;
        top: 406px;
        left: 88px;
        -webkit-transform-origin: right top;
        -webkit-animation: rightfoot 0.8s ease-in-out infinite;
      }
      @-webkit-keyframes rightfoot {
        0%,
        50%,
        100% {
          -webkit-transform: rotate(0deg);
        }
        80% {
          -webkit-transform: rotate(10deg);
        }
      }
      .feet .left_foot {
        border-bottom-right-radius: 9px;
        border-bottom-left-radius: 6px;
        left: 130px;
        -webkit-transform-origin: left top;
        -webkit-animation: leftfoot 0.8s ease-in-out infinite;
      }
      @-webkit-keyframes leftfoot {
        0%,
        50%,
        100% {
          -webkit-transform: rotate(0deg);
        }

        30% {
          -webkit-transform: rotate(-10deg);
        }
      }
      .feet .left_foot:after,
      .feet .right_foot:after {
        content: '';
        width: 60px;
        height: 35px;
        border-radius: 20px 10px 21px 15px;
        background: #000;
        position: absolute;
        left: -36px;
        top: 14.4px;
        -webkit-transform: rotate(5deg);
      }
      .feet .left_foot:after {
        border-radius: 10px 20px 15px 21px;
        left: 13px;
        -webkit-transform: rotate(-5deg);
      }
      .groundShadow {
        width: 200px;
        height: 2px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.3);
        position: relative;
        top: 455px;
        left: 25px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <!-- 容器 -->
      <div class="littleH">
        <!-- 小黄人 -->
        <div class="bodyH">
          <!-- 身体 -->
          <div class="trousers">
            <!-- 裤子 -->
            <div class="condoleBelt">
              <!-- 吊带 -->
              <div class="left"></div>
              <div class="right"></div>
            </div>
            <div class="trousers_top"></div>
            <!-- 裤子突出的矩形部分 -->
            <div class="pocket"></div>
            <!-- 裤袋 -->
            <!-- 三条线 -->
            <span class="line_left"></span>
            <span class="line_right"></span>
            <span class="line_bottom"></span>
          </div>
        </div>
        <div class="hair">
          <!-- 头发 -->
          <span class="left_hair_one"></span>
          <span class="left_hair_two"></span>
        </div>
        <div class="eyes">
          <!-- 眼睛 -->
          <div class="leftEye">
            <!-- 左眼 -->
            <div class="left_blackEye">
              <div class="left_white"></div>
            </div>
          </div>
          <div class="rightEye">
            <!-- 右眼 -->
            <div class="right_blackEye">
              <div class="right_white"></div>
            </div>
          </div>
        </div>
        <div class="mouse">
          <!-- 嘴巴 -->
          <div class="mouse_shape"></div>
        </div>
        <div class="hands">
          <!-- 双手 -->
          <div class="leftHand"></div>
          <div class="rightHand"></div>
        </div>
        <div class="feet">
          <!-- 双脚 -->
          <div class="left_foot"></div>
          <div class="right_foot"></div>
        </div>
        <div class="groundShadow"></div>
        <!-- 脚底阴影 -->
      </div>
    </div>
  </body>
</html>
